<template>
    <div class="schoolSummarizedBox" ref="schoolSummarized">
        <div class="currentPosition clearFix">
            <div class="tips">
                <label>当前位置：</label>
            </div>
            <div class="current">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/class/classHomePage' }">班级首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{menuNewTabList.name}}</el-breadcrumb-item>
                    <!-- <el-breadcrumb-item>{{position}}</el-breadcrumb-item> -->
                </el-breadcrumb>
            </div>
        </div>

        <el-container>
            <el-aside class="leftBox">
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-vertical-demo"
                    @select="change"
                    @open="handleOpen"
                    @close="handleClose" v-if="active">
                    <el-menu-item :index="item.routerTo" v-for="(item, index) in menuNewTabList.children" :key="index" @click="menuChange(item)">
                        <span slot="title">{{item.name}}</span>
                    </el-menu-item>
                </el-menu>
                <el-menu default-active="" v-else>
                </el-menu>
            </el-aside>

            <el-main class="mainBox">
                <ArticleCurrency :menuChangeN='menuChangeN' v-show="isArticle" :isDails='isDails'></ArticleCurrency>
                <PictureCurrency v-show="!isArticle" :menuChangeN='menuChangeN'></PictureCurrency>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import PictureCurrency from '@c/space/PictureCurrency'
    import ArticleCurrency from '@c/space/ArticleCurrency'
    export default {
        props:['menuTabList','activeMenuIndex'],
        components:{
            ArticleCurrency,
            PictureCurrency
        },
        watch:{
             $route:{
                 handler(val){
                     this.initMenu()
                 },
                 deep :true
             },
             active(val){
                 if(val){
                     this.menuChangeN = null
                     this.menuChangeN = this.menuNewTabList
                 }
             }
        },
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo
            })
        },
        created() {
            if(this.$route.query.junmpType == 1){
                this.isArticle = true
            }else{
                this.isArticle = false
            }
            this.initMenu()
        },
        mounted() {
            if(this.activeMenuIndex){
                this.activeIndex = this.activeMenuIndex 
            }else if(this.$route.fullPath){
                this.activeIndex =this.$route.fullPath
            }
            // this.menuChangeN = this.menuNewTabList
        },
        data(){
            return{
                isArticle: true,
                menuChangeN:{},
                active: true,
                menuNewTabList:{},
                position:"简介",
                isDails: false,
                activeIndex:'/class/classWentInto/classBulletin'
            }
        },
        methods: {
            initMenu(params){
                if(this.menuTabList.length == null){
                    this.$router.push({path:'/class/classHomePage'})
                }else{
                    this.menuTabList.map(item =>{
                        if("/"+item.routerName == this.$route.name){
                            this.menuNewTabList = item
                            this.active = false
                            if(this.menuNewTabList.children){
                                this.menuNewTabList.children.map(itemIn =>{
                                    if(itemIn.routerTo == this.activeMenuIndex || params){
                                        this.isArticle = itemIn.jumpType ==1 ? true:false
                                        this.menuChangeN = itemIn
                                    }
                                })
                            }
                            this.$nextTick(()=>{
                                this.activeIndex =this.$route.path || this.activeMenuIndex
                                this.$emit('changeLeftMenu',this.$route.path)
                                this.active = true
                            })
                        }
                    })
                }
            },
            menuChange(params){
                if(params.jumpType ==1 ){
                    this.isArticle = true
                }else{
                    this.isArticle = false
                }
                this.menuChangeN = params
            },
            change(key, keyPath){
                // 点击后关闭详情
                this.isDails = true
            },
            handleOpen(key, keyPath) {
                this.activeIndex = keyPath
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="scss" scoped>
.schoolSummarizedBox{
    .currentPosition{
        margin-top: 20px;
        font-size: 14px;
        color: #303133;
        .tips,.current{
            float: left;
        }
        .current{
            margin-top: 3px;
        }
    }

    .leftBox{
        padding: 20px 0;
    }

    .mainBox{
        padding: 20px 0 20px 20px;
    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>